<template>
    <div class="flex-sty">
        <div class="drag-inner">
            <el-card v-if="svgListAll.length > 0 || pointList.length > 0">
                <svg class="canvas" v-for="(items, ind) in svgListAll" :key="ind">
                    <g v-for="(item, index) in items.markPoints" :key="index">
                        <polygon :points="item.pointText" style="
                    stroke: #1dfff9;
                    fill: rgba(29, 255, 249, 0.4);
                    stroke-width: 2;
                " />
                        <g v-for="(pointItem, pointIndex) in item.pointList" :key="pointIndex">
                            <rect :x="pointItem.x - 3" :y="pointItem.y - 3" width="6" height="6" fill="#ff1d23"></rect>
                        </g>
                    </g>
                </svg>
                <div v-for="(item, index) in pointList" :key="index" class="xbox" :style="{
                    width: item.width,
                    height: item.height,
                    left: item.left,
                    top: item.top,
                }">
                    <div v-if="pageType == 'detail'">
                        <div class="text" v-if="!item.isShow">
                            <span style="margin-right: 5px">{{ item.type }}</span>
                            <span>{{ item.confidence }}</span>
                        </div>
                        <div v-else class="text_P" :style="{ width: item.txt_width }">
                            <div class="textA">
                                <span style="margin-right: 5px">{{ item.type }}</span>
                                <span>{{ item.confidence }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </el-card>
            <el-card class="alarm-info">
                <div slot="header" class="header-title">
                    <span>告警信息</span>
                </div>
                <el-descriptions>
                    <el-descriptions-item label="船舶名称">{{ alarmInfo.deptName || '' }}</el-descriptions-item>
                    <el-descriptions-item label="船舶MMSI">{{ alarmInfo.mmsi || '' }}</el-descriptions-item>
                    <el-descriptions-item label="船舶识别号">{{ alarmInfo.nmmsi || '' }}</el-descriptions-item>
                    <el-descriptions-item label="摄像头编码">{{ alarmInfo.camera_id || '' }}</el-descriptions-item>
                    <el-descriptions-item label="摄像头位置">{{ alarmInfo.camera_name || '' }}</el-descriptions-item>
                    <el-descriptions-item label="盒子ID">{{ alarmInfo.box_id || '' }}</el-descriptions-item>
                    <el-descriptions-item label="设备状态">
                        <el-tag size="medium" v-if="alarmInfo.state === 1">正常</el-tag>
                        <el-tag size="medium" type="info" v-else>误检</el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item prop="state" label="告警处置状态" min-width="180">
                        <el-tag size="medium" v-if="alarmInfo.processState === 1">已处置</el-tag>
                        <el-tag size="medium" type="warning" v-else-if="alarmInfo.processState === 2">超时已处置</el-tag>
                        <el-tag size="medium" type="danger" v-else>未处置</el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item label="告警等级"><el-tag v-if="alarmInfo.level" size="small">{{ alarmInfo.level }}</el-tag></el-descriptions-item>
                    <el-descriptions-item label="告警编码">{{ alarmInfo.algorithm_id || '' }}</el-descriptions-item>
                    <el-descriptions-item label="告警类型">{{ alarmInfo.algorithm_name || '' }}</el-descriptions-item>
                    <el-descriptions-item label="告警时间" :span="2">{{ alarmInfo.alarm_dt || '' }}</el-descriptions-item>
                    <el-descriptions-item label="备注" :span="3">{{ alarmInfo.remark || '' }}</el-descriptions-item>
                </el-descriptions>
            </el-card>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-card>
                        <div slot="header" class="header-title">
                            <span>告警图片</span>
                        </div>
                        <img style="width: 100%" :id="'draw_img' + Index" draggable="false" :ref="'draw_img' + Index" :src="fileUrl" @click="dialogImageVisible = true" title="点击放大" />
                    </el-card>
                </el-col>
                <el-col :span="12">
                    <el-card class="video-box-card">
                        <div slot="header" class="header-title">
                            <span>告警视频（视频为告警时间前后5秒）</span>
                        </div>
                        <div @click="handleVideo" :title="filePath ? '点击放大' : ''">
                            <easyPlayer ref="easyPlayerRef" :videoUrl="filePath" :height="false"></easyPlayer>
                            <div v-if="!filePath" class="no-video">暂无视频!</div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>
        <el-dialog title="告警图片" width="1000px" :visible.sync="dialogImageVisible" :modal-append-to-body="true" :append-to-body="true" class="alarm-info-img-dialog">
            <img style="width: 100%" :src="fileUrl" />
        </el-dialog>
    </div>
</template>

<script>
    import easyPlayer from './easyPlayer.vue'
    export default {
        props: {
            Index: {
                type: Number,
                default: 0,
            },
            fileUrl: {
                type: String,
                default: "",
            },
            filePath: {
                type: String,
                default: "",
            },
            dataListAll: {
                type: Array,
                default: () => [],
            },
            dataList: {
                type: Array,
                default: () => [],
            },
            ratio: {
                type: Number,
                default: 1,
            },
            pageType: {
                type: String,
                default: "",
            },
            alarmInfo: {
                type: Object,
                default: () => {},
            },
        },
        components: { easyPlayer },
        data() {
            return {
                svgList: [],
                pointCount: 0,
                pointList: [],
                finish: true,
                pointIndex: null,
                isTrue: false,
                isDisabled: true,
                svgListAll: [],
                imgWidth: "",
                imgHeight: "",
                svgIndexList: [],
                dialogImageVisible: false,
                dialogVideoVisible: false,
            };
        },
        watch: {
            dataList: {
                immediate: true,
                deep: true,
                handler(val) {
                    if (val && val.length > 0) {
                        this.$nextTick(() => {
                            this.pointList = [];
                            let img = new Image();
                            img.src = this.fileUrl;
                            if (!this.fileUrl) {
                                return;
                            }
                            img.onload = () => {
                                let height = img.height;
                                setTimeout(() => {
                                    const ratio =
                                        this.$refs["draw_img" + this.Index].offsetHeight / height;
                                    val.forEach((item) => {
                                        let width =
                                            (item.position[2] - item.position[0]) * ratio * this.ratio;
                                        // 创建临时元素
                                        const _span = document.createElement("span");
                                        // 放入文本
                                        _span.innerText =
                                            item.type + parseFloat(item.confidence).toFixed(2);
                                        // 设置文字大小
                                        _span.style.fontSize = "12px";
                                        // span放入body中
                                        document.body.appendChild(_span);
                                        // 获取span的宽度
                                        let txt_width = _span.offsetWidth + 18;
                                        // 从body中删除该span
                                        document.body.removeChild(_span);
                                        if (item.position[3] * this.ratio > height) {
                                            item.position[3] = height / this.ratio;
                                        }
                                        this.pointList.push({
                                            left: item.position[0] * ratio * this.ratio + "px",
                                            top: item.position[1] * ratio * this.ratio + "px",
                                            width:
                                                (item.position[2] - item.position[0]) * ratio * this.ratio +
                                                "px",
                                            height:
                                                (item.position[3] - item.position[1]) * ratio * this.ratio +
                                                "px",
                                            txt_width: txt_width + 3 + "px",
                                            confidence: parseFloat(item.confidence).toFixed(2),
                                            type: item.type,
                                            isShow: txt_width > width ? true : false,
                                        });
                                    });
                                }, 100);
                            };
                        });
                    }
                },
            },
            dataListAll: {
                immediate: true,
                handler(val) {
                    if (val.length > 0) {
                        this.svgListAll = [];
                        this.$nextTick(() => {
                            this.pointList = [];
                            let img = new Image();
                            img.src = this.fileUrl;
                            img.onload = () => {
                                this.imgWidth = img.width;
                                setTimeout(() => {
                                    const ratio =
                                        this.imgWidth /
                                        this.$refs["draw_img" + this.Index].offsetWidth;
                                    val.forEach((item) => {
                                        let newMarkArr = [];
                                        item.markPoints.forEach((items) => {
                                            let arr = [];
                                            let pointText = "";
                                            items.pointList.forEach((ite) => {
                                                arr.push({
                                                    x: Math.ceil((ite.x / ratio) * this.ratio),
                                                    y: Math.ceil((ite.y / ratio) * this.ratio),
                                                });
                                                pointText =
                                                    pointText +
                                                    ` ${Math.ceil(
                                                        (ite.x / ratio) * this.ratio
                                                    )},${Math.ceil((ite.y / ratio) * this.ratio)}`;
                                            });
                                            newMarkArr.push({
                                                pointList: arr,
                                                pointText: pointText,
                                            });
                                        });
                                        this.svgListAll.push({
                                            markPoints: newMarkArr,
                                        });
                                    });
                                }, 100);
                            };
                        });
                    } else {
                        this.svgListAll = [];
                    }
                },
            },
        },
        created() {
            setTimeout(() => {
                this.imgHeight = this.$refs["draw_img" + this.Index].offsetHeight + "px";
            }, 50);
        },
        mounted() {
        },
        methods: {
            handleVideo() {
                if(!this.filePath) return;
                const playerRef = this.$refs.easyPlayerRef;
                if (!playerRef || !playerRef.$el) {
                    this.$message.warning("播放器尚未加载");
                    return;
                }
                const playerElement = playerRef.$el; // 获取 easyPlayer 渲染出的真实 DOM 容器
                if (playerElement.requestFullscreen) {
                    playerElement.requestFullscreen();
                } else if (playerElement.mozRequestFullScreen) { /* Firefox */
                    playerElement.mozRequestFullScreen();
                } else if (playerElement.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
                    playerElement.webkitRequestFullscreen();
                } else if (playerElement.msRequestFullscreen) { /* IE/Edge */
                    playerElement.msRequestFullscreen();
                }
            }
        },
    };
</script>
<style scoped>
    .drag-inner {
        position: relative;
        width: 100%;
    }

    .drag-inner .canvas {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        right: 0;
        z-index: 2;
    }

    .drag-inner .bg-img {
        width: 100%;
    }

    .drag-inner .xbox {
        position: absolute;
        border: 2px solid #f43838;
        background-color: rgba(255, 0, 0, 0.2);
        font-size: 12px;
        color: #1e9fff;
        z-index: 2;
    }

    .drag-inner .xbox .text {
        width: 100%;
        height: 20px;
        line-height: 20px;
        font-size: 12px;
        color: #fff;
        background-color: rgba(255, 0, 0, 0.4);
        padding: 0 5px;
    }

    .drag-inner .xbox .textA {
        line-height: 20px;
        font-size: 12px;
        color: #fff;
        background-color: rgba(255, 0, 0, 0.4);
        padding: 0 5px;
    }

    .drag-inner .xbox .text_P {
        position: absolute;
        top: -20px;
        right: -2px;
    }
    .header-title {
        text-align: left;
    }
    .alarm-info {
        margin: 20px 0;
    }
    .video-box-card {
        position: relative;
    }
    .no-video {
        color: #f43838;
        position: absolute;
        width: 100%;
        text-align: center;
        top: 50%;
        left: 0;
    }
    .el-col .el-card {
        height: 338px;
    }
</style>
